
<template>
  <div class="commentRoot">
    <div class="inputWrap" v-show="commentType==='musicList'">
      <el-input type="textarea" ref="inputRef1" placeholder="留下评论" v-model.trim="commentInput" maxlength="140" show-word-limit> </el-input>
      <div class="btn">
        <el-button size="small" round @click="submitComment">评论</el-button>
      </div>
    </div>
    <div class="musicComment" v-if="false">
      <el-button class="cardSwitch" size="small" round @click="openLog">
        <i class="iconfont icon-ziyuan"></i> 发表我的音乐评论
      </el-button>
      <el-dialog></el-dialog>
      <el-dialog v-model="dialogVisible" width="400px" @close='closeLog'>
        <div class="micTitle">歌曲：{{musicTitle}}</div>
        <el-input type="textarea" class="cardInput" ref="inputRef2" placeholder="留下评论" v-model.trim="commentInput" maxlength="140" show-word-limit> </el-input>
        <div class="btn">
          <el-button size="small" round @click="submitComment">评论</el-button>
        </div>
      </el-dialog>
    </div>
    <sub-comment title='精彩评论' :comments='hotComments' @floorComment='floorComment' />
    <sub-comment title='最新评论' :comments='comments' @floorComment='floorComment' />
  </div>
</template>

<script>
let obj = null
import { reactive, toRefs, onMounted, nextTick, ref } from 'vue'
import SubComment from './SubComment.vue'
export default {
  name: 'Comment',
  components: { SubComment },
  props: {
    commentType: {
      type: String,
      default: ''
    },
    scrollObj: {
      type: String,
      default: ''
    },
    comments: {
      type: Array,
      default() {
        return []
      }
    },
    hotComments: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(p) {
    const data = reactive({
      commentInput: '',
      floorId: 1,
      floorConent: '',
      isShowLog: false
    })
    const inputRef1 = ref(null)
    const submitComment = () => {}
    const openLog = () => {}
    const closeLog = () => {}

    const floorComment = info => {
      console.log(p.scrollObj)
      if (obj == null) {
        obj = document.querySelector(p.scrollObj)
      }
      obj.scrollTo({
        behavior: 'smooth',
        top: 50
      })
      data.floorId = info.floorId
      data.commentInput = `回复${info.nickname}:`
      data.floorConent = data.commentInput
    }
    onMounted(() => {
      nextTick(() => {
        console.log(inputRef1.value)
        inputRef1.value.focus()
      })
    })
    return {
      ...toRefs(data),
      inputRef1,
      submitComment,
      openLog,
      closeLog,
      floorComment
    }
  }
}
</script>

<style scoped>
.commentRoot {
  width: 100%;
}
.el-input {
  padding: 5px 15px;
  height: 80px;
}
.el-textarea__inner {
  resize: none;
}
.btn {
  margin: 8px 0;
  text-align: right;
}
.commentCardSwitch {
  position: fixed;
  left: 50%;
  top: calc(100vh - 105px);
  border: none;
  line-height: 15px;
  background-color: #f1f1f1;
  padding: 10px 10px 10px 30px;
}
</style>